<template>
  <div class="job_detail" slot="body">
    <Header></Header>

    <el-card class="detail-card">

      <div slot="header" class="clearfix">
        <el-row>
          <el-button style="margin-right: 10px;color:#F56C6C" icon="el-icon-star-off" type="text" @click="like(1)"
                     v-if="!is_like">收藏职位
          </el-button>
          <el-button style="margin-right: 10px;color:#F56C6C" icon="el-icon-star-on" type="text" @click="like(-1)"
                     v-else>取消收藏
          </el-button>
          <span style="color: #C0C4CC;margin-right: 10px">[ <el-button type="text" @click="company_detail(14)">{{job.company}}</el-button> 发布于 {{job.createTime}} ]</span>
          <span style="color: #C0C4CC;">浏览数: {{job.browseNum}}</span>
          <span style="color: #C0C4CC;margin: 0px 5px"></span>
          <span style="color: #C0C4CC;">收藏数: {{job.likeNum}}</span>
        </el-row>
        <el-row style="text-align: center">
          <el-col :span="23">
            <h2>{{job.title}}<span style="color: #F56C6C">{{job.money}}</span></h2>
          </el-col>
          <el-col :span="1">
            <el-button style="float: right;margin-top: 5px" icon="el-icon-files" type="success" @click="submit_cal()"
                       v-if="!submit" plain>投递简历
            </el-button>
            <el-button style="float: right;margin-top: 5px" icon="el-icon-check" type="success" v-else plain>已投递
            </el-button>
          </el-col>
        </el-row>
        <el-row style="text-align: center">
          <el-col :span="23">
            <span style="font-size: 18px;color: #909399;">{{job.addr}} / {{job.experience}} / {{job.education}} / {{job.category}} / {{job.type}}</span>
          </el-col>
        </el-row>
      </div>

      <el-descriptions title="职位介绍"></el-descriptions>
      <span v-html="job.content">  </span>
      <el-divider></el-divider>

      <el-descriptions title="招聘者">
        <el-descriptions-item label="点击联系">
          <el-link icon="el-icon-chat-dot-round" style="border: none" @click="contact">邓先生</el-link>
        </el-descriptions-item>
      </el-descriptions>

    </el-card>

    <el-card class="detail-card">
      <el-descriptions title="职位评价"></el-descriptions>
      <el-button type="primary" size="mini" @click="common">添加评论</el-button>
      <div class="comment" v-for="i in common_list" :key="i">
        <el-divider></el-divider>
        <el-row>
          <el-col :span="2" style="text-align: center">
            <img :src="i.picture" alt="" style="width: 50px;height: 50px;border-radius: 50%"><br><span>{{i.name}}
          </span>
          </el-col>
          <el-col :span="21"><span style="color: #C0C4CC">{{i.createTime}}</span><br><br>{{i.content}}</el-col>
        </el-row>
      </div>
    </el-card>
    <el-dialog
      title="添加评论"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="内容">
          <el-input v-model="form.content" type="textarea"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="submit_common">确 定</el-button>
  </span>
    </el-dialog>
    <el-card style="width: 270px;position: absolute;top: 100px;right: 30px">
      <div slot="header" class="clearfix" style="text-align: center;">
        <span>推荐职位</span>
      </div>
      <div v-for="(i,index) in recommend_list" :key="index" v-if="index<2" >
        <div @click="job_detail(i.id)" style="cursor: pointer">
          <el-row style="margin: 5px 0px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;color: #E6A23C;">
            {{i.title}}
          </el-row>
          <el-row style="color: #F56C6C;">{{i.money}}</el-row>
        </div>
        <el-row @click.native="company_detail(i)"
                style="cursor: pointer;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;color: #409EFF;">
          {{i.company}}
        </el-row>
        <el-divider></el-divider>
      </div>
    </el-card>

    <Footer></Footer>
  </div>
</template>

<script>
  import Header from './Header'
  import Footer from './Footer'

  export default {
    name: 'JobDetail',
    components: {Header, Footer},
    created () {
      this.$axios.post('http://localhost:8081/job/selectByJob', {
        'tag': 1,
      }).then((res) => {
        const result = res.data
        this.recommend_list = result.data.reverse()
      })
      this.notFound = require('@/assets/user.png')
      this.$axios.post('http://localhost:8081/job/selectById', {
        'id': this.$route.query.id
      }).then((res) => {
        const result = res.data
        this.job = result.data
      })
    },
    data () {
      return {
        form: {
          picture: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
          name: this.$session.get('user').username,
          createTime: this.get_time(),
          content: ''
        },
        dialogVisible: false,
        notFound: '',
        job: [],
        is_like: false,
        submit: false,
        recommend_list: [],
        common_list: [
          {
            picture: 'favicon.ico',
            name: '邓先生',
            createTime: '2022-01-24 17:57:11',
            content: '上去之后直接做面试题，10-15分钟，做完就会开始面试，面试官很年轻看起来技术很棒，会根据你的简历和笔试题回答来和你聊，相当于大家一起探讨，很愉快。'
          }

        ]
      }
    },
    methods: {
      get_time() {
        let myDate = new Date()
        let wk = myDate.getDay()
        let yy = String(myDate.getFullYear())
        let mm = myDate.getMonth() + 1
        let dd = String(myDate.getDate() < 10 ? '0' + myDate.getDate() : myDate.getDate())
        let hou = String(myDate.getHours() < 10 ? '0' + myDate.getHours() : myDate.getHours())
        let min = String(myDate.getMinutes() < 10 ? '0' + myDate.getMinutes() : myDate.getMinutes())
        let sec = String(myDate.getSeconds() < 10 ? '0' + myDate.getSeconds() : myDate.getSeconds())
        return yy+"-"+mm+"-"+dd+" "+hou+":"+min+":"+sec
      },
      submit_common () {
        this.dialogVisible = false
        this.$message({message: '评论成功!', type: 'success'})
        this.common_list.push(this.form)
      },
      contact() {
        this.$router.push({path: 'message'})
      },
      like (num) {
        this.is_like = !this.is_like
        this.job.likeNum += num
      },
      submit_cal () {
        this.submit = !this.submit
        this.$message({message: '投递成功!', type: 'success'})
      },
      job_detail (id) {
        this.$router.push({path: 'job_detail', query: {id: id}})
      },
      company_detail (id) {
        this.$router.push({path: 'company_detail', query: {id: id}})
      },
      common () {
        this.dialogVisible = true
      }
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .detail-card {
    width: 1100px;
    margin-left: 5%;
    margin-top: 50px;
  }
</style>
